<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>在线考试系统 - 成绩与排名</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Font Awesome 图标 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <!-- Chart.js -->
    <script src=""></script>
    <!-- SheetJS (xlsx) for Excel export -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --success-color: #4cc9f0;
            --info-color: #4895ef;
            --warning-color: #f8961e;
            --danger-color: #f72585;
            --light-color: #f8f9fa;
            --dark-color: #212529;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f1f3f6;
            color: #333;
            line-height: 1.6;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 600;
        }

        .container {
            max-width: 1200px;
        }

        .card {
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            overflow: hidden;
            border: none;
            margin-bottom: 20px;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        }

        .card-header {
            border-bottom: none;
            background-color: var(--primary-color);
            color: white;
            padding: 1rem 1.5rem;
        }

        .card-header-secondary {
            background-color: var(--secondary-color);
        }

        .card-header-success {
            background-color: var(--success-color);
        }

        .card-header-info {
            background-color: var(--info-color);
        }

        .card-header-warning {
            background-color: var(--warning-color);
        }

        .card-header-danger {
            background-color: var(--danger-color);
        }

        .chart-container {
            position: relative;
            height: 300px;
            margin-bottom: 20px;
        }

        .mini-chart-container {
            position: relative;
            height: 150px;
            margin-bottom: 10px;
        }

        .nav-tabs {
            margin-bottom: 2rem;
            justify-content: center;
            border-bottom: 2px solid rgba(0,0,0,0.1);
        }

        .nav-tabs .nav-link {
            border: none;
            padding: 0.8rem 1.5rem;
            font-weight: 500;
            color: #555;
            border-radius: 0;
            position: relative;
            margin: 0 5px;
        }

        .nav-tabs .nav-link.active {
            color: var(--primary-color);
            background-color: transparent;
            border-bottom: 3px solid var(--primary-color);
        }

        .nav-tabs .nav-link:hover:not(.active) {
            color: var(--primary-color);
            border-bottom: 3px solid rgba(67, 97, 238, 0.3);
        }

        .progress-bar {
            transition: width 0.6s ease;
        }

        .progress {
            height: 10px;
            border-radius: 5px;
        }

        .score-badge {
            font-size: 1rem;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            display: inline-block;
            margin-top: 10px;
            font-weight: 500;
        }

        .score-good {
            background-color: rgba(76, 201, 240, 0.2);
            color: #0a6c74;
        }

        .score-average {
            background-color: rgba(248, 150, 30, 0.2);
            color: #b35900;
        }

        .score-low {
            background-color: rgba(247, 37, 133, 0.2);
            color: #9e0059;
        }

        .score-perfect {
            background: linear-gradient(135deg, rgba(255,215,0,0.2) 0%, rgba(255,165,0,0.2) 100%);
            color: #b8860b;
        }

        .user-info-card {
            background-color: #ffffff;
            border-left: 5px solid var(--primary-color);
            padding: 1.5rem;
            margin-bottom: 30px;
            border-radius: 0.75rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 20px;
            border: 3px solid white;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .user-rank {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }

        .user-score {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin: 5px 0;
        }

        .user-percentage {
            font-size: 1.2rem;
            color: #666;
        }

        .rank-label {
            font-weight: bold;
            color: var(--danger-color);
        }

        /* 导出按钮样式 */
        .export-btn-group {
            display: flex;
            gap: 10px;
        }

        .export-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 500;
        }

        /* 排名表格样式 */
        .top-rank {
            font-weight: bold;
            color: var(--danger-color);
        }

        .rank-1 {
            background-color: rgba(255, 215, 0, 0.1);
        }

        .rank-2 {
            background-color: rgba(192, 192, 192, 0.1);
        }

        .rank-3 {
            background-color: rgba(205, 127, 50, 0.1);
        }

        .current-user-row {
            background-color: rgba(67, 97, 238, 0.1);
            position: relative;
        }

        .current-user-row::after {
            content: "当前用户";
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--primary-color);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .current-user-row td {
            font-weight: 600;
            color: var(--primary-color);
        }

        /* 徽章样式 */
        .badge-custom {
            padding: 0.35em 0.65em;
            font-size: 0.75em;
            font-weight: 600;
            letter-spacing: 0.5px;
            border-radius: 50px;
        }

        /* 学科标签 */
        .subject-tag {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 500;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            background-color: #e9ecef;
            color: #495057;
        }

        /* 时间线样式 */
        .timeline {
            position: relative;
            padding-left: 30px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #dee2e6;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 20px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -30px;
            top: 3px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--primary-color);
            border: 2px solid white;
        }

        .timeline-date {
            font-size: 0.85rem;
            color: #6c757d;
        }

        .timeline-content {
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .user-avatar {
                width: 60px;
                height: 60px;
            }

            .user-score {
                font-size: 1.5rem;
            }

            .chart-container {
                height: 250px;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fadein {
            animation: fadeIn 0.6s ease forwards;
            opacity: 0;
        }

        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }
        .delay-5 { animation-delay: 0.5s; }

        /* 悬浮效果 */
        .hover-scale {
            transition: transform 0.3s ease;
        }

        .hover-scale:hover {
            transform: scale(1.03);
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        /* 评分星星 */
        .rating-stars {
            color: #ffc107;
            font-size: 1.2rem;
        }

        /* 学科卡片 */
        .subject-card {
            border-left: 4px solid var(--primary-color);
            transition: all 0.3s ease;
        }

        .subject-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }

        /* 分析卡片 */
        .analysis-card {
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .analysis-card h6 {
            color: #555;
            font-weight: 600;
            margin-bottom: 10px;
        }

        /* 雷达图容器 */
        .radar-chart-container {
            height: 350px;
        }
    </style>
</head>
<body>
<div class="container py-4">
    <h1 class="mb-4 text-center animate-fadein">考试成绩分析报告</h1>

    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4 animate-fadein delay-1">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i> 首页</a></li>
            <li class="breadcrumb-item"><a href="#"><i class="fas fa-book-open"></i> 我的课程</a></li>
            <li class="breadcrumb-item"><a href="#"><i class="fas fa-clipboard-list"></i> 期中考试</a></li>
            <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-chart-line"></i> 成绩分析</li>
        </ol>
    </nav>

    <ul class="nav nav-tabs justify-content-center mb-4 animate-fadein delay-2" id="scoreTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
                <i class="fas fa-chart-pie me-1"></i> 成绩概览
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="ranking-tab" data-bs-toggle="tab" data-bs-target="#ranking" type="button" role="tab">
                <i class="fas fa-trophy me-1"></i> 排名列表
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="analysis-tab" data-bs-toggle="tab" data-bs-target="#analysis" type="button" role="tab">
                <i class="fas fa-microscope me-1"></i> 详细分析
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab">
                <i class="fas fa-history me-1"></i> 历史记录
            </button>
        </li>
    </ul>

    <div class="tab-content" id="scoreTabsContent">
        <!-- 成绩概览 -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel">
            <!-- 用户信息 -->
            <div class="user-info-card d-flex align-items-center animate-fadein delay-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="头像" class="user-avatar hover-scale">
                <div class="flex-grow-1">
                    <div class="d-flex justify-content-between align-items-center flex-wrap">
                        <div>
                            <h4 class="mb-1">张三 <span class="badge bg-primary badge-custom">A班</span></h4>
                            <p class="mb-2 text-muted"><i class="fas fa-graduation-cap me-1"></i> 学号: 20230032</p>
                        </div>
                        <div class="text-end">
                            <span class="user-rank"><i class="fas fa-crown me-1"></i> 第4名</span>
                            <span class="d-block text-muted">全班45人</span>
                        </div>
                    </div>

                    <div class="d-flex align-items-center flex-wrap mt-2">
                        <div class="me-4">
                            <span class="user-score">85 <small class="fs-6">分</small></span>
                            <span class="user-percentage">(总分: 100分)</span>
                        </div>
                        <div>
                            <span class="score-badge score-good"><i class="fas fa-check-circle me-1"></i> 优秀</span>
                            <span class="rating-stars ms-2">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 成绩统计 -->
            <div class="row g-4 mb-4">
                <div class="col-md-3 animate-fadein delay-4">
                    <div class="card text-center p-3 h-100 hover-scale">
                        <h6><i class="fas fa-chart-bar me-2"></i>平均分</h6>
                        <p class="display-4 mb-0 text-primary">78.5</p>
                        <p class="text-muted mb-0">比上次 +5.2</p>
                    </div>
                </div>
                <div class="col-md-3 animate-fadein delay-4">
                    <div class="card text-center p-3 h-100 hover-scale">
                        <h6><i class="fas fa-trophy me-2"></i>最高分</h6>
                        <p class="display-4 mb-0 text-success">95</p>
                        <p class="text-muted mb-0">李四 (A班)</p>
                    </div>
                </div>
                <div class="col-md-3 animate-fadein delay-4">
                    <div class="card text-center p-3 h-100 hover-scale">
                        <h6><i class="fas fa-arrow-down me-2"></i>最低分</h6>
                        <p class="display-4 mb-0 text-warning">58</p>
                        <p class="text-muted mb-0">王明 (C班)</p>
                    </div>
                </div>
                <div class="col-md-3 animate-fadein delay-4">
                    <div class="card text-center p-3 h-100 hover-scale">
                        <h6><i class="fas fa-percentage me-2"></i>及格率</h6>
                        <p class="display-4 mb-0 text-info">92.3%</p>
                        <p class="text-muted mb-0">42/45人</p>
                    </div>
                </div>
            </div>

            <!-- 进度条和学科表现 -->
            <div class="row mb-4">
                <div class="col-md-6 animate-fadein delay-5">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-tachometer-alt me-2"></i>个人成绩分析</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>得分: 85/100</span>
                                    <span>85%</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped bg-success" role="progressbar"
                                         style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>班级排名: 第4名</span>
                                    <span>前8.9%</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped bg-info" role="progressbar"
                                         style="width: 91.1%" aria-valuenow="91.1" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>

                            <div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>用时: 52分钟</span>
                                    <span>快于86%考生</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
                                         style="width: 86%" aria-valuenow="86" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 animate-fadein delay-5">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-book me-2"></i>学科表现</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <div class="subject-card p-3">
                                        <h6 class="d-flex justify-content-between">
                                            <span>数学</span>
                                            <span class="text-success">92</span>
                                        </h6>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-success" style="width: 92%"></div>
                                        </div>
                                        <small class="text-muted">班级平均: 85</small>
                                    </div>
                                </div>
                                <div class="col-6 mb-3">
                                    <div class="subject-card p-3">
                                        <h6 class="d-flex justify-content-between">
                                            <span>物理</span>
                                            <span class="text-primary">88</span>
                                        </h6>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-primary" style="width: 88%"></div>
                                        </div>
                                        <small class="text-muted">班级平均: 82</small>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="subject-card p-3">
                                        <h6 class="d-flex justify-content-between">
                                            <span>化学</span>
                                            <span class="text-info">85</span>
                                        </h6>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-info" style="width: 85%"></div>
                                        </div>
                                        <small class="text-muted">班级平均: 78</small>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="subject-card p-3">
                                        <h6 class="d-flex justify-content-between">
                                            <span>生物</span>
                                            <span class="text-warning">75</span>
                                        </h6>
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-warning" style="width: 75%"></div>
                                        </div>
                                        <small class="text-muted">班级平均: 70</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="row animate-fadein delay-5">
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-chart-bar me-2"></i>分数分布</h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="scoreDistributionChart"></canvas>
                            </div>
                            <div class="text-center mt-2">
                                <span class="badge bg-primary me-2"><i class="fas fa-user me-1"></i> 你的位置</span>
                                <span class="text-muted">大多数同学集中在70-90分区间</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-chart-line me-2"></i>历史成绩趋势</h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="scoreTrendChart"></canvas>
                            </div>
                            <div class="text-center mt-2">
                                <span class="badge bg-success me-2"><i class="fas fa-arrow-up me-1"></i> 持续进步</span>
                                <span class="text-muted">比上次考试提高5分</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 小型分析卡片 -->
            <div class="row mt-4 animate-fadein delay-5">
                <div class="col-md-3">
                    <div class="analysis-card hover-scale">
                        <h6><i class="fas fa-clock me-2"></i>答题速度</h6>
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <span class="text-primary fw-bold">较快</span>
                                <div class="progress mt-1" style="height: 5px; width: 80px;">
                                    <div class="progress-bar bg-primary" style="width: 75%"></div>
                                </div>
                            </div>
                            <small class="text-muted">快于86%考生</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="analysis-card hover-scale">
                        <h6><i class="fas fa-check-circle me-2"></i>正确率</h6>
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <span class="text-success fw-bold">优秀</span>
                                <div class="progress mt-1" style="height: 5px; width: 80px;">
                                    <div class="progress-bar bg-success" style="width: 85%"></div>
                                </div>
                            </div>
                            <small class="text-muted">高于平均12%</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="analysis-card hover-scale">
                        <h6><i class="fas fa-chart-pie me-2"></i>稳定性</h6>
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <span class="text-info fw-bold">良好</span>
                                <div class="progress mt-1" style="height: 5px; width: 80px;">
                                    <div class="progress-bar bg-info" style="width: 65%"></div>
                                </div>
                            </div>
                            <small class="text-muted">波动较小</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="analysis-card hover-scale">
                        <h6><i class="fas fa-medal me-2"></i>排名趋势</h6>
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <span class="text-warning fw-bold">上升</span>
                                <div class="progress mt-1" style="height: 5px; width: 80px;">
                                    <div class="progress-bar bg-warning" style="width: 55%"></div>
                                </div>
                            </div>
                            <small class="text-muted">比上次提升2名</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 排名列表 -->
        <div class="tab-pane fade" id="ranking" role="tabpanel">
            <div class="card animate-fadein">
                <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><i class="fas fa-trophy me-2"></i>考试排名</h5>
                    <div class="d-flex align-items-center">
                        <div class="input-group input-group-sm me-3" style="width: 200px;">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                            <input type="text" class="form-control" placeholder="搜索姓名或班级..." id="rankingSearch">
                        </div>
                        <div class="export-btn-group">
                            <button id="exportCsvBtn" class="btn btn-sm btn-outline-light export-btn">
                                <i class="fas fa-file-csv"></i> 导出CSV
                            </button>
                            <button id="exportExcelBtn" class="btn btn-sm btn-outline-light export-btn">
                                <i class="fas fa-file-excel"></i> 导出Excel
                            </button>
                            <button id="exportPdfBtn" class="btn btn-sm btn-outline-light export-btn">
                                <i class="fas fa-file-pdf"></i> 导出PDF
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive custom-scrollbar" style="max-height: 500px;">
                        <table class="table table-hover align-middle" id="rankingTable">
                            <thead class="sticky-top" style="top: -1px; background-color: #f8f9fa; z-index: 1;">
                            <tr>
                                <th>排名</th>
                                <th>姓名</th>
                                <th>分数</th>
                                <th>班级</th>
                                <th>用时</th>
                                <th>正确率</th>
                                <th>提交时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="rank-1">
                                <td class="top-rank">1 <i class="fas fa-crown text-warning"></i></td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>李四</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-success">95</span></td>
                                <td><span class="badge bg-primary">A班</span></td>
                                <td>45分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-success" style="width: 95%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 10:30</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            <tr class="rank-2">
                                <td class="top-rank">2 <i class="fas fa-medal text-secondary"></i></td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>王五</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-success">92</span></td>
                                <td><span class="badge bg-primary">B班</span></td>
                                <td>50分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-success" style="width: 92%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 11:00</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            <tr class="rank-3">
                                <td class="top-rank">3 <i class="fas fa-medal text-danger"></i></td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>赵六</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-success">90</span></td>
                                <td><span class="badge bg-primary">C班</span></td>
                                <td>55分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-success" style="width: 90%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 11:30</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            <tr class="current-user-row">
                                <td>4</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>张三</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-primary">85</span></td>
                                <td><span class="badge bg-primary">A班</span></td>
                                <td>52分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-primary" style="width: 85%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 11:45</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>小明</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-info">80</span></td>
                                <td><span class="badge bg-primary">B班</span></td>
                                <td>58分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-info" style="width: 80%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 12:00</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>小红</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-info">78</span></td>
                                <td><span class="badge bg-primary">C班</span></td>
                                <td>60分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-info" style="width: 78%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 12:15</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>小刚</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-warning">75</span></td>
                                <td><span class="badge bg-primary">A班</span></td>
                                <td>62分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-warning" style="width: 75%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 12:30</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>8</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>小丽</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-warning">72</span></td>
                                <td><span class="badge bg-primary">B班</span></td>
                                <td>65分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-warning" style="width: 72%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 12:45</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>9</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>小强</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-warning">68</span></td>
                                <td><span class="badge bg-primary">C班</span></td>
                                <td>70分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-warning" style="width: 68%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 13:00</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="头像" class="rounded-circle me-2" width="30" height="30">
                                        <span>小美</span>
                                    </div>
                                </td>
                                <td><span class="badge bg-danger">65</span></td>
                                <td><span class="badge bg-primary">A班</span></td>
                                <td>75分钟</td>
                                <td>
                                    <div class="progress" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-danger" style="width: 65%"></div>
                                    </div>
                                </td>
                                <td>2023-10-01 13:15</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary"><i class="fas fa-eye"></i></button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页导航 -->
                    <nav aria-label="Page navigation" class="mt-4">
                        <ul class="pagination justify-content-center">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1"><i class="fas fa-angle-left"></i></a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#"><i class="fas fa-angle-right"></i></a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>

            <!-- 班级对比图表 -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-chart-pie me-2"></i>班级平均分对比</h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="classComparisonChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-chart-bar me-2"></i>班级及格率对比</h5>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="passRateChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细分析 -->
        <div class="tab-pane fade" id="analysis" role="tabpanel">
            <div class="row">
                <div class="col-md-8">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-star me-2"></i>各科能力分析</h5>
                        </div>
                        <div class="card-body">
                            <div class="radar-chart-container">
                                <canvas id="radarChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-list-check me-2"></i>知识点掌握情况</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>知识点</th>
                                        <th>题目数量</th>
                                        <th>正确率</th>
                                        <th>掌握程度</th>
                                        <th>建议</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>函数与方程</td>
                                        <td>5</td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-success" style="width: 90%"></div>
                                            </div>
                                            <small>90%</small>
                                        </td>
                                        <td><span class="badge bg-success">优秀</span></td>
                                        <td><small class="text-muted">继续保持</small></td>
                                    </tr>
                                    <tr>
                                        <td>立体几何</td>
                                        <td>4</td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-primary" style="width: 75%"></div>
                                            </div>
                                            <small>75%</small>
                                        </td>
                                        <td><span class="badge bg-primary">良好</span></td>
                                        <td><small class="text-muted">加强空间想象训练</small></td>
                                    </tr>
                                    <tr>
                                        <td>概率统计</td>
                                        <td>3</td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-warning" style="width: 60%"></div>
                                            </div>
                                            <small>60%</small>
                                        </td>
                                        <td><span class="badge bg-warning">一般</span></td>
                                        <td><small class="text-muted">多做概率应用题</small></td>
                                    </tr>
                                    <tr>
                                        <td>导数应用</td>
                                        <td>4</td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-danger" style="width: 40%"></div>
                                            </div>
                                            <small>40%</small>
                                        </td>
                                        <td><span class="badge bg-danger">薄弱</span></td>
                                        <td><small class="text-muted">重点复习导数概念</small></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-lightbulb me-2"></i>学习建议</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-primary">
                                <h6><i class="fas fa-check-circle me-2"></i>优势科目</h6>
                                <p class="mb-2">数学函数部分表现优异，继续保持！</p>
                            </div>

                            <div class="alert alert-warning">
                                <h6><i class="fas fa-exclamation-triangle me-2"></i>需加强科目</h6>
                                <p class="mb-2">导数应用部分较弱，建议：</p>
                                <ul class="small">
                                    <li>复习导数的基本概念</li>
                                    <li>完成专项练习10题</li>
                                    <li>观看教学视频3节</li>
                                </ul>
                            </div>

                            <div class="alert alert-info">
                                <h6><i class="fas fa-clock me-2"></i>时间管理</h6>
                                <p class="mb-2">选择题用时较长，建议：</p>
                                <ul class="small">
                                    <li>练习快速判断技巧</li>
                                    <li>进行限时训练</li>
                                    <li>先做会做的题目</li>
                                </ul>
                            </div>

                            <div class="text-center mt-3">
                                <button class="btn btn-primary">
                                    <i class="fas fa-download me-2"></i>下载详细报告
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-trophy me-2"></i>成就徽章</h5>
                        </div>
                        <div class="card-body">
                            <div class="text-center">
                                <div class="mb-3">
                                    <img src="https://via.placeholder.com/80" alt="徽章" class="img-fluid rounded-circle mb-2" style="width: 80px;">
                                    <h6>数学小能手</h6>
                                    <small class="text-muted">数学成绩超过90%同学</small>
                                </div>

                                <div class="mb-3">
                                    <img src="https://via.placeholder.com/80" alt="徽章" class="img-fluid rounded-circle mb-2" style="width: 80px;">
                                    <h6>进步之星</h6>
                                    <small class="text-muted">连续三次考试进步</small>
                                </div>

                                <div>
                                    <img src="https://via.placeholder.com/80" alt="徽章" class="img-fluid rounded-circle mb-2" style="width: 80px; filter: grayscale(100%); opacity: 0.5;">
                                    <h6 class="text-muted">速度达人</h6>
                                    <small class="text-muted">答题速度超过95%同学</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 历史记录 -->
        <div class="tab-pane fade" id="history" role="tabpanel">
            <div class="row">
                <div class="col-md-8">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="card-title mb-0"><i class="fas fa-history me-2"></i>历史考试成绩</h5>
                            <div>
                                <select class="form-select form-select-sm" style="width: 150px;">
                                    <option>全部科目</option>
                                    <option>数学</option>
                                    <option>物理</option>
                                    <option>化学</option>
                                    <option>生物</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="historyScoreChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-list-ol me-2"></i>历史考试记录</h5>
                        </div>
                        <div class="card-body">
                            <div class="timeline">
                                <div class="timeline-item">
                                    <div class="timeline-date">2023年10月15日</div>
                                    <div class="timeline-content">
                                        <div class="d-flex justify-content-between">
                                            <h6>期中考试</h6>
                                            <span class="badge bg-primary">85分</span>
                                        </div>
                                        <p class="mb-1 small">班级排名: 第4名 (前8.9%)</p>
                                        <p class="mb-0 small text-muted">用时: 52分钟 | 正确率: 85%</p>
                                    </div>
                                </div>

                                <div class="timeline-item">
                                    <div class="timeline-date">2023年9月20日</div>
                                    <div class="timeline-content">
                                        <div class="d-flex justify-content-between">
                                            <h6>第一次月考</h6>
                                            <span class="badge bg-primary">80分</span>
                                        </div>
                                        <p class="mb-1 small">班级排名: 第6名 (前13.3%)</p>
                                        <p class="mb-0 small text-muted">用时: 58分钟 | 正确率: 80%</p>
                                    </div>
                                </div>

                                <div class="timeline-item">
                                    <div class="timeline-date">2023年8月25日</div>
                                    <div class="timeline-content">
                                        <div class="d-flex justify-content-between">
                                            <h6>入学测试</h6>
                                            <span class="badge bg-primary">75分</span>
                                        </div>
                                        <p class="mb-1 small">班级排名: 第8名 (前17.8%)</p>
                                        <p class="mb-0 small text-muted">用时: 65分钟 | 正确率: 75%</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-chart-line me-2"></i>排名趋势</h5>
                        </div>
                        <div class="card-body">
                            <div class="mini-chart-container">
                                <canvas id="rankTrendChart"></canvas>
                            </div>
                            <div class="text-center mt-3">
                                <span class="badge bg-success"><i class="fas fa-arrow-up me-1"></i> 排名上升趋势</span>
                            </div>
                        </div>
                    </div>

                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-award me-2"></i>最佳表现</h5>
                        </div>
                        <div class="card-body">
                            <div class="text-center mb-3">
                                <div class="display-4 text-success">95</div>
                                <p class="mb-1">最高分 (2023年7月考试)</p>
                                <small class="text-muted">数学科目</small>
                            </div>

                            <div class="text-center mb-3">
                                <div class="display-4 text-primary">第2名</div>
                                <p class="mb-1">最佳排名 (2023年6月考试)</p>
                                <small class="text-muted">班级前4.4%</small>
                            </div>

                            <div class="text-center">
                                <div class="display-4 text-info">35分钟</div>
                                <p class="mb-1">最快完成 (2023年5月考试)</p>
                                <small class="text-muted">快于95%考生</small>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0"><i class="fas fa-bullseye me-2"></i>目标设定</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">下次考试目标分数</label>
                                <input type="range" class="form-range" min="60" max="100" value="88" step="1" id="targetScoreRange">
                                <div class="d-flex justify-content-between">
                                    <small>60</small>
                                    <small>70</small>
                                    <small>80</small>
                                    <small>90</small>
                                    <small>100</small>
                                </div>
                                <div class="text-center mt-2">
                                    <span class="badge bg-primary">当前目标: 88分</span>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">目标排名</label>
                                <select class="form-select">
                                    <option>保持当前排名</option>
                                    <option selected>进入前3名</option>
                                    <option>进入前5名</option>
                                    <option>进入前10名</option>
                                </select>
                            </div>

                            <button class="btn btn-primary w-100">
                                <i class="fas fa-check-circle me-2"></i>确认目标
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 初始化图表 -->
<script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 分数分布柱状图
        const scoreDistribution = new Chart(document.getElementById('scoreDistributionChart'), {
            type: 'bar',
            data: {
                labels: ['50-60', '60-70', '70-80', '80-90', '90-100'],
                datasets: [{
                    label: '人数',
                    data: [3, 5, 12, 18, 7],
                    backgroundColor: [
                        'rgba(247, 37, 133, 0.7)',
                        'rgba(248, 150, 30, 0.7)',
                        'rgba(76, 201, 240, 0.7)',
                        'rgba(67, 97, 238, 0.7)',
                        'rgba(72, 199, 142, 0.7)'
                    ],
                    borderColor: [
                        'rgba(247, 37, 133, 1)',
                        'rgba(248, 150, 30, 1)',
                        'rgba(76, 201, 240, 1)',
                        'rgba(67, 97, 238, 1)',
                        'rgba(72, 199, 142, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `人数: ${context.raw}`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: '人数'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: '分数区间'
                        }
                    }
                }
            }
        });

        // 历史成绩趋势图
        const scoreTrend = new Chart(document.getElementById('scoreTrendChart'), {
            type: 'line',
            data: {
                labels: ['第1次', '第2次', '第3次', '第4次', '第5次'],
                datasets: [{
                    label: '你的成绩',
                    data: [70, 75, 80, 82, 85],
                    borderColor: '#4361ee',
                    backgroundColor: 'rgba(67, 97, 238, 0.1)',
                    tension: 0.3,
                    fill: true,
                    borderWidth: 2,
                    pointBackgroundColor: '#4361ee',
                    pointRadius: 5,
                    pointHoverRadius: 7
                }, {
                    label: '班级平均',
                    data: [65, 68, 72, 75, 78],
                    borderColor: '#4cc9f0',
                    backgroundColor: 'rgba(76, 201, 240, 0.1)',
                    tension: 0.3,
                    fill: true,
                    borderWidth: 2,
                    borderDash: [5, 5],
                    pointBackgroundColor: '#4cc9f0',
                    pointRadius: 5,
                    pointHoverRadius: 7
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.dataset.label}: ${context.raw}分`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        min: 50,
                        max: 100,
                        title: {
                            display: true,
                            text: '分数'
                        }
                    }
                }
            }
        });

        // 班级对比图表
        const classComparison = new Chart(document.getElementById('classComparisonChart'), {
            type: 'bar',
            data: {
                labels: ['A班', 'B班', 'C班'],
                datasets: [{
                    label: '平均分',
                    data: [82, 78, 76],
                    backgroundColor: 'rgba(67, 97, 238, 0.7)',
                    borderColor: 'rgba(67, 97, 238, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `平均分: ${context.raw}`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        min: 70,
                        max: 90,
                        title: {
                            display: true,
                            text: '平均分'
                        }
                    }
                }
            }
        });

        // 及格率图表
        const passRateChart = new Chart(document.getElementById('passRateChart'), {
            type: 'bar',
            data: {
                labels: ['A班', 'B班', 'C班'],
                datasets: [{
                    label: '及格率',
                    data: [95, 90, 85],
                    backgroundColor: [
                        'rgba(72, 199, 142, 0.7)',
                        'rgba(76, 201, 240, 0.7)',
                        'rgba(248, 150, 30, 0.7)'
                    ],
                    borderColor: [
                        'rgba(72, 199, 142, 1)',
                        'rgba(76, 201, 240, 1)',
                        'rgba(248, 150, 30, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `及格率: ${context.raw}%`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        title: {
                            display: true,
                            text: '及格率(%)'
                        }
                    }
                }
            }
        });

        // 雷达图
        const radarChart = new Chart(document.getElementById('radarChart'), {
            type: 'radar',
            data: {
                labels: ['数学', '物理', '化学', '生物', '英语', '语文'],
                datasets: [{
                    label: '你的能力值',
                    data: [92, 88, 85, 75, 80, 78],
                    backgroundColor: 'rgba(67, 97, 238, 0.2)',
                    borderColor: 'rgba(67, 97, 238, 1)',
                    pointBackgroundColor: 'rgba(67, 97, 238, 1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(67, 97, 238, 1)',
                    borderWidth: 2
                }, {
                    label: '班级平均',
                    data: [85, 82, 78, 70, 75, 80],
                    backgroundColor: 'rgba(76, 201, 240, 0.2)',
                    borderColor: 'rgba(76, 201, 240, 1)',
                    pointBackgroundColor: 'rgba(76, 201, 240, 1)',
                    pointBorderColor: '#fff',
                    pointHoverBackgroundColor: '#fff',
                    pointHoverBorderColor: 'rgba(76, 201, 240, 1)',
                    borderWidth: 2,
                    borderDash: [5, 5]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.dataset.label}: ${context.raw}分`;
                            }
                        }
                    }
                },
                scales: {
                    r: {
                        angleLines: {
                            display: true
                        },
                        suggestedMin: 50,
                        suggestedMax: 100,
                        ticks: {
                            stepSize: 10
                        }
                    }
                }
            }
        });

        // 历史成绩图表
        const historyScoreChart = new Chart(document.getElementById('historyScoreChart'), {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
                datasets: [{
                    label: '数学',
                    data: [70, 72, 75, 78, 82, 85, 88, 80, 85, 88],
                    borderColor: '#4361ee',
                    backgroundColor: 'rgba(67, 97, 238, 0.1)',
                    tension: 0.3,
                    fill: true,
                    borderWidth: 2
                }, {
                    label: '物理',
                    data: [65, 68, 70, 72, 75, 78, 80, 75, 78, 82],
                    borderColor: '#4cc9f0',
                    backgroundColor: 'rgba(76, 201, 240, 0.1)',
                    tension: 0.3,
                    fill: true,
                    borderWidth: 2
                }, {
                    label: '化学',
                    data: [60, 65, 68, 70, 72, 75, 78, 70, 75, 78],
                    borderColor: '#f8961e',
                    backgroundColor: 'rgba(248, 150, 30, 0.1)',
                    tension: 0.3,
                    fill: true,
                    borderWidth: 2
                }, {
                    label: '生物',
                    data: [55, 60, 65, 68, 70, 72, 75, 68, 70, 75],
                    borderColor: '#f72585',
                    backgroundColor: 'rgba(247, 37, 133, 0.1)',
                    tension: 0.3,
                    fill: true,
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.dataset.label}: ${context.raw}分`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        min: 50,
                        title: {
                            display: true,
                            text: '分数'
                        }
                    }
                }
            }
        });

        // 排名趋势图表
        const rankTrendChart = new Chart(document.getElementById('rankTrendChart'), {
            type: 'line',
            data: {
                labels: ['8月', '9月', '10月'],
                datasets: [{
                    label: '排名',
                    data: [8, 6, 4],
                    borderColor: '#4361ee',
                    backgroundColor: 'rgba(67, 97, 238, 0.1)',
                    tension: 0.3,
                    fill: true,
                    borderWidth: 2,
                    pointBackgroundColor: '#4361ee',
                    pointRadius: 5,
                    pointHoverRadius: 7
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `排名: 第${context.raw}名`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        reverse: true,
                        beginAtZero: false,
                        min: 1,
                        max: 10,
                        ticks: {
                            stepSize: 1,
                            callback: function(value) {
                                return `第${value}名`;
                            }
                        }
                    }
                }
            }
        });

        // 导出功能
        // 导出CSV
        document.getElementById('exportCsvBtn').addEventListener('click', function() {
            exportTableToCSV('rankingTable', '考试排名.csv');
        });

        // 导出Excel
        document.getElementById('exportExcelBtn').addEventListener('click', function() {
            exportTableToExcel('rankingTable', '考试排名.xlsx');
        });

        // 导出PDF (模拟)
        document.getElementById('exportPdfBtn').addEventListener('click', function() {
            alert('PDF导出功能需要集成PDF库如jsPDF或使用服务器端生成');
        });

        // 表格搜索功能
        document.getElementById('rankingSearch').addEventListener('input', function() {
            const searchText = this.value.toLowerCase();
            const rows = document.querySelectorAll('#rankingTable tbody tr');

            rows.forEach(row => {
                const rowText = row.textContent.toLowerCase();
                row.style.display = rowText.includes(searchText) ? '' : 'none';
            });
        });

        // 目标分数范围显示
        const targetScoreRange = document.getElementById('targetScoreRange');
        targetScoreRange.addEventListener('input', function() {
            const targetBadge = this.nextElementSibling.nextElementSibling.querySelector('.badge');
            targetBadge.textContent = `当前目标: ${this.value}分`;
        });

        // 页面加载动画
        const elements = document.querySelectorAll('.animate-fadein');
        elements.forEach(el => {
            el.style.opacity = 1;
        });
    });

    // 导出为CSV文件
    function exportTableToCSV(tableId, filename) {
        const table = document.getElementById(tableId);
        const rows = table.querySelectorAll('tr');
        let csvContent = '';

        // 处理表头
        const headerCells = rows[0].querySelectorAll('th, td');
        const headerRow = Array.from(headerCells).map(cell => {
            return '"' + cell.textContent.trim().replace(/"/g, '""') + '"';
        }).join(',');
        csvContent += headerRow + '\r\n';

        // 处理数据行
        for (let i = 1; i < rows.length; i++) {
            if (rows[i].style.display === 'none') continue;

            const cells = rows[i].querySelectorAll('td');
            const row = Array.from(cells).map(cell => {
                return '"' + cell.textContent.trim().replace(/"/g, '""') + '"';
            }).join(',');
            csvContent += row + '\r\n';
        }

        // 创建下载链接
        const blob = new Blob(["\uFEFF" + csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);

        link.setAttribute('href', url);
        link.setAttribute('download', filename);
        link.style.visibility = 'hidden';

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    // 导出为Excel文件
    function exportTableToExcel(tableId, filename) {
        const table = document.getElementById(tableId);
        // 克隆表格以不影响原表格显示
        const clonedTable = table.cloneNode(true);

        // 移除隐藏的行
        Array.from(clonedTable.querySelectorAll('tr')).forEach(row => {
            if (row.style.display === 'none') {
                row.parentNode.removeChild(row);
            }
        });

        const workbook = XLSX.utils.table_to_book(clonedTable, {sheet: "考试排名"});

        // 生成Excel文件并下载
        XLSX.writeFile(workbook, filename, {
            compression: true
        });
    }
</script>

<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>